<!DOCTYPE html>
<html dir="ltr" lang="en">
    
<!-- Mirrored from expandtheme.omorfaruks.com/admin/ui-bootstrap.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 11 Dec 2018 21:41:46 GMT -->
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- Tell the browser to be responsive to screen width -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Favicon icon -->
        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
        <title>Bebert - Multipurpose Admin Template</title>
        <!-- Custom CSS -->
        <link href="assets/css/theme.css" rel="stylesheet">
        <link href="assets/css/responsive.css" rel="stylesheet">
        <!-- This Page CSS -->
        <link rel="stylesheet" type="text/css" href="assets/libs/prism/prism.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>
        <!-- ============================================================== -->
        <!-- Preloader - style you can find in spinners.css -->
        <!-- ============================================================== -->
        <div class="preloader">
            <div class="lds-ripple">
                <div class="lds-pos"></div>
                <div class="lds-pos"></div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- Main wrapper - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <div id="main-wrapper">
            <!-- ============================================================== -->
            <!-- Topbar header - style you can find in pages.scss -->
            <!-- ============================================================== -->
            <header class="topbar">
                <nav class="navbar top-navbar navbar-expand-md navbar-dark">
                    <div class="navbar-header">
                        <!-- This is for the sidebar toggle which is visible on mobile only -->
                        <a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i class="ti-menu ti-close"></i></a>
                        <!-- ============================================================== -->
                        <!-- Logo -->
                        <!-- ============================================================== -->
                        <a class="navbar-brand" href="index-2.html">
                            <!-- Logo icon -->
                            <b class="logo-icon">
                                <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                <!-- Dark Logo icon -->
                                <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                                <!-- Light Logo icon -->
                                <img src="assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
                            </b>
                            <!--End Logo icon -->
                            <!-- Logo text -->
                            <span class="logo-text">
                                <!-- dark Logo text -->
                                <img src="assets/images/logo-text.png" alt="homepage" class="dark-logo" />
                                <!-- Light Logo text -->    
                                <img src="assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
                            </span>
                        </a>
                        <!-- ============================================================== -->
                        <!-- End Logo -->
                        <!-- ============================================================== -->
                        <!-- ============================================================== -->
                        <!-- Toggle which is visible on mobile only -->
                        <!-- ============================================================== -->
                        <a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="ti-more"></i></a>
                    </div>
                    <!-- ============================================================== -->
                    <!-- End Logo -->
                    <!-- ============================================================== -->
                    <div class="navbar-collapse collapse" id="navbarSupportedContent">
                        <!-- ============================================================== -->
                        <!-- toggle and nav items -->
                        <!-- ============================================================== -->
                        <ul class="navbar-nav float-left mr-auto">
                            <li class="nav-item d-none d-md-block"><a class="nav-link sidebartoggler waves-effect waves-light" href="javascript:void(0)" data-sidebartype="mini-sidebar"><i class="mdi mdi-menu font-24"></i></a></li>

                            <!-- ============================================================== -->
                            <!-- create new -->
                            <!-- ============================================================== -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="d-none d-md-block">Drop down <i class="fa fa-angle-down"></i></span>
                                    <span class="d-block d-md-none"><i class="fa fa-plus"></i></span>   
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>

                        </ul>
                        <!-- ============================================================== -->
                        <!-- Right side toggle and nav items -->
                        <!-- ============================================================== -->
                        <ul class="navbar-nav float-right">

                            <!-- ============================================================== -->
                            <!-- Search -->
                            <!-- ============================================================== -->
                            <li class="nav-item search-box">
                                <div class="m-header-search m-header-search--expandable">
                                    <form class="m-header-search__form">
                                        <div class="m-header-search__wrapper">
                                            <span class="m-header-search__icon-search">
                                                <i class="ti-search"></i>
                                            </span>
                                            <span class="s">
                                                <input autocomplete="off" type="text" name="q" class="m-header-search__input" value="" placeholder="Search...">
                                            </span>
                                        </div>
                                    </form>
                                </div>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link waves-effect waves-light" href="javascript:void(0);" id="btn-fullscreen"><i class="mdi mdi-fullscreen font-24"></i></a>
                            </li>

                            <!-- ============================================================== -->
                            <!-- Comment -->
                            <!-- ============================================================== -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-bell font-24"></i>

                                </a>
                                <div class="dropdown-menu dropdown-menu-right mailbox animated bounceInDown">
                                    <span class="with-arrow"><span class="bg-primary"></span></span>
                                    <ul class="list-style-none">
                                        <li>
                                            <div class="drop-title bg-primary text-white">
                                                <h4 class="m-b-0 m-t-5">4 New</h4>
                                                <span class="font-light">Notifications</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="message-center notifications">
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="btn btn-danger btn-circle"><i class="fa fa-link"></i></span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
                                                </a>
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="btn btn-success btn-circle"><i class="ti-calendar"></i></span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
                                                </a>
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="btn btn-info btn-circle"><i class="ti-settings"></i></span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
                                                </a>
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="btn btn-primary btn-circle"><i class="ti-user"></i></span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <a class="nav-link text-center m-b-5 text-dark" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!-- ============================================================== -->
                            <!-- End Comment -->
                            <!-- ============================================================== -->
                            <!-- ============================================================== -->
                            <!-- Messages -->
                            <!-- ============================================================== -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle waves-effect waves-dark" href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="font-24 mdi mdi-comment-processing"></i>

                                </a>
                                <div class="dropdown-menu dropdown-menu-right mailbox animated bounceInDown" aria-labelledby="2">
                                    <span class="with-arrow"><span class="bg-danger"></span></span>
                                    <ul class="list-style-none">
                                        <li>
                                            <div class="drop-title text-white bg-danger">
                                                <h4 class="m-b-0 m-t-5">5 New</h4>
                                                <span class="font-light">Messages</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="message-center message-body">
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="rounded-circle"> <span class="profile-status online pull-right"></span> </span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
                                                </a>
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="rounded-circle"> <span class="profile-status busy pull-right"></span> </span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
                                                </a>
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="rounded-circle"> <span class="profile-status away pull-right"></span> </span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
                                                </a>
                                                <!-- Message -->
                                                <a href="javascript:void(0)" class="message-item">
                                                    <span class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="rounded-circle"> <span class="profile-status offline pull-right"></span> </span>
                                                    <div class="mail-contnet">
                                                        <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <a class="nav-link text-center link text-dark" href="javascript:void(0);"> <b>See all e-Mails</b> <i class="fa fa-angle-right"></i> </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!-- ============================================================== -->
                            <!-- End Messages -->
                            <!-- ============================================================== -->

                            <!-- ============================================================== -->
                            <!-- User profile and search -->
                            <!-- ============================================================== -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="assets/images/users/1.jpg" alt="user" class="rounded-circle" width="31"><b>Steave Jobs <i class="fa fa-angle-down"></i></b>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
                                    <span class="with-arrow"><span class="bg-primary"></span></span>
                                    <div class="d-flex no-block align-items-center p-15 bg-primary text-white m-b-10">
                                        <div class=""><img src="assets/images/users/1.jpg" alt="user" class="img-circle" width="60"></div>
                                        <div class="m-l-10">
                                            <h4 class="m-b-0">Steave Jobs</h4>
                                            <p class=" m-b-0">varun@gmail.com</p>
                                        </div>
                                    </div>
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="ti-user m-r-5 m-l-5"></i> My Profile</a>
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="ti-wallet m-r-5 m-l-5"></i> My Balance</a>
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="ti-email m-r-5 m-l-5"></i> Inbox</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="ti-settings m-r-5 m-l-5"></i> Account Setting</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="authentication-login1.html"><i class="fa fa-power-off m-r-5 m-l-5"></i> Logout</a>
                                </div>
                            </li>
                            <!-- ============================================================== -->
                            <!-- User profile and search -->
                            <!-- ============================================================== -->
                        </ul>
                    </div>
                </nav>
            </header>
            <!-- ============================================================== -->
            <!-- End Topbar header -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- Left Sidebar - style you can find in sidebar.scss  -->
            <!-- ============================================================== -->
            <aside class="left-sidebar">
                <!-- Sidebar scroll-->
                <div class="scroll-sidebar">
                    <!-- Sidebar navigation-->
                    <nav class="sidebar-nav">
                        <ul id="sidebarnav">
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Dashboard </span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="index1.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 01 </span></a></li>
                                    <li class="sidebar-item"><a href="index2.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 02 </span></a></li>
                                    <li class="sidebar-item"><a href="index3.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 03 </span></a></li>
                                    <li class="sidebar-item"><a href="index4.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 04 </span></a></li>
                                    <li class="sidebar-item"><a href="index5.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 05 </span></a></li>
                                    <li class="sidebar-item"><a href="index6.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 06 </span></a></li>
                                    <li class="sidebar-item"><a href="index7.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 07 </span></a></li>
                                    <li class="sidebar-item"><a href="index8.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 08 </span></a></li>
                                    <li class="sidebar-item"><a href="index9.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 09 </span></a></li>
                                    <li class="sidebar-item"><a href="index10.html" class="sidebar-link"><i class="mdi mdi-adjust"></i><span class="hide-menu"> Dashboard 10 </span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-tune-vertical"></i><span class="hide-menu">Sidebar Type </span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="sidebar-type-minisidebar.html" class="sidebar-link"><i class="mdi mdi-view-quilt"></i><span class="hide-menu"> Minisidebar </span></a></li>
                                    <li class="sidebar-item"><a href="sidebar-type-iconsidebar.html" class="sidebar-link"><i class="mdi mdi-view-parallel"></i><span class="hide-menu"> Icon Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="sidebar-type-overlaysidebar.html" class="sidebar-link"><i class="mdi mdi-view-day"></i><span class="hide-menu"> Overlay Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="sidebar-type-fullsidebar.html" class="sidebar-link"><i class="mdi mdi-view-array"></i><span class="hide-menu"> Full Sidebar </span></a></li>
                                    
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-content-copy"></i><span class="hide-menu">Page Layouts </span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="layout-inner-fixed-left-sidebar.html" class="sidebar-link"><i class="mdi mdi-format-align-left"></i><span class="hide-menu"> Inner Fixed Left Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="layout-inner-fixed-right-sidebar.html" class="sidebar-link"><i class="mdi mdi-format-align-right"></i><span class="hide-menu"> Inner Fixed Right Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="layout-inner-left-sidebar.html" class="sidebar-link"><i class="mdi mdi-format-float-left"></i><span class="hide-menu"> Inner Left Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="layout-inner-right-sidebar.html" class="sidebar-link"><i class="mdi mdi-format-float-right"></i><span class="hide-menu"> Inner Right Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="page-layout-fixed-header.html" class="sidebar-link"><i class="mdi mdi-view-quilt"></i><span class="hide-menu"> Fixed Header </span></a></li>
                                    <li class="sidebar-item"><a href="page-layout-fixed-sidebar.html" class="sidebar-link"><i class="mdi mdi-view-parallel"></i><span class="hide-menu"> Fixed Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="page-layout-fixed-header-sidebar.html" class="sidebar-link"><i class="mdi mdi-view-column"></i><span class="hide-menu"> Fixed Header &amp; Sidebar </span></a></li>
                                    <li class="sidebar-item"><a href="page-layout-boxed-layout.html" class="sidebar-link"><i class="mdi mdi-view-carousel"></i><span class="hide-menu"> Box Layout </span></a></li>
                                </ul>
                            </li>

                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-inbox-arrow-down"></i><span class="hide-menu">Email </span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="inbox-email.html" class="sidebar-link"><i class="mdi mdi-email"></i><span class="hide-menu"> Email </span></a></li>
                                    <li class="sidebar-item"><a href="inbox-email-detail.html" class="sidebar-link"><i class="mdi mdi-email-alert"></i><span class="hide-menu"> Email Detail </span></a></li>
                                    <li class="sidebar-item"><a href="inbox-email-compose.html" class="sidebar-link"><i class="mdi mdi-email-secure"></i><span class="hide-menu"> Email Compose </span></a></li>
                                    <li class="sidebar-item"><a href="email-templete-basic.html" class="sidebar-link"><i class="mdi mdi-message-bulleted"></i><span class="hide-menu">Template Basic</span></a></li>
                                    <li class="sidebar-item"><a href="email-templete-billing.html" class="sidebar-link"><i class="mdi mdi-message-draw"></i><span class="hide-menu">Template Billing</span></a></li>
                                    <li class="sidebar-item"><a href="email-templete-password-reset.html" class="sidebar-link"><i class="mdi mdi-message-bulleted-off"></i><span class="hide-menu">Template Password-Reset</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-gradient"></i><span class="hide-menu">Extra </span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="app-chats.html" class="sidebar-link"><i class="mdi mdi-comment-processing-outline"></i><span class="hide-menu"> Chats Apps </span></a></li>
                                    <li class="sidebar-item"><a href="app-calendar.html" class="sidebar-link"><i class="mdi mdi-calendar"></i><span class="hide-menu"> Calender </span></a></li>
                                    <li class="sidebar-item"><a href="app-taskboard.html" class="sidebar-link"><i class="mdi mdi-bulletin-board"></i><span class="hide-menu"> Taskboard </span></a></li>
                                    <li class="sidebar-item"><a href="ticket-list.html" class="sidebar-link"><i class="mdi mdi-book-multiple"></i><span class="hide-menu"> Ticket List </span></a></li>
                                    <li class="sidebar-item"><a href="ticket-detail.html" class="sidebar-link"><i class="mdi mdi-book-plus"></i><span class="hide-menu"> Ticket Detail </span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-widgets"></i><span class="hide-menu">Ui Elements </span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><i class="mdi mdi-toggle-switch"></i><span class="hide-menu"> Buttons</span></a></li>
                                    <li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><i class="mdi mdi-tablet"></i><span class="hide-menu"> Modals</span></a></li>
                                    <li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><i class="mdi mdi-sort-variant"></i><span class="hide-menu"> Tab</span></a></li>
                                    <li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><i class="mdi mdi-image-filter-vintage"></i><span class="hide-menu"> Tooltip &amp; Popover</span></a></li>
                                    <li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><i class="mdi mdi-message-bulleted"></i><span class="hide-menu"> Notification</span></a></li>
                                    <li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><i class="mdi mdi-poll"></i><span class="hide-menu"> Progressbar</span></a></li>
                                    <li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><i class="mdi mdi-format-line-spacing"></i><span class="hide-menu"> Typography</span></a></li>
                                    <li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><i class="mdi mdi-bootstrap"></i><span class="hide-menu"> Bootstrap Ui</span></a></li>
                                    <li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><i class="mdi mdi-equal"></i><span class="hide-menu"> Breadcrumb</span></a></li>
                                    <li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><i class="mdi mdi-file-video"></i><span class="hide-menu"> List Media</span></a></li>
                                    <li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><i class="mdi mdi-view-module"></i><span class="hide-menu"> Grid</span></a></li>
                                    <li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><i class="mdi mdi-view-carousel"></i><span class="hide-menu"> Carousel</span></a></li>
                                    <li class="sidebar-item"><a href="ui-cards.html" class="sidebar-link"><i class="mdi mdi-layers"></i><span class="hide-menu"> Basic Cards</span></a></li>
                                    <li class="sidebar-item"><a href="ui-card-customs.html" class="sidebar-link"><i class="mdi mdi-credit-card-scan"></i><span class="hide-menu">Custom Cards</span></a></li>
                                    <li class="sidebar-item"><a href="ui-card-weather.html" class="sidebar-link"><i class="mdi mdi-weather-fog"></i><span class="hide-menu">Weather Cards</span></a></li>
                                    <li class="sidebar-item"><a href="ui-card-draggable.html" class="sidebar-link"><i class="mdi mdi-bandcamp"></i><span class="hide-menu">Draggable Cards</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-credit-card-multiple"></i><span class="hide-menu">Components</span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="component-sweetalert.html" class="sidebar-link"><i class="mdi mdi-layers"></i><span class="hide-menu"> Sweet Alert</span></a></li>
                                    <li class="sidebar-item"><a href="component-nestable.html" class="sidebar-link"><i class="mdi mdi-credit-card-scan"></i><span class="hide-menu">Nestable</span></a></li>
                                    <li class="sidebar-item"><a href="component-noui-slider.html" class="sidebar-link"><i class="mdi mdi-weather-fog"></i><span class="hide-menu">Noui slider</span></a></li>
                                    <li class="sidebar-item"><a href="component-rating.html" class="sidebar-link"><i class="mdi mdi-bandcamp"></i><span class="hide-menu">Rating</span></a></li>
                                    <li class="sidebar-item"><a href="component-toastr.html" class="sidebar-link"><i class="mdi mdi-poll"></i><span class="hide-menu">Toastr</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-gradient"></i><span class="hide-menu">Widgets </span></a>
                                <ul aria-expanded="false" class="collapse  first-level">
                                    <li class="sidebar-item"><a href="widgets-apps.html" class="sidebar-link"><i class="mdi mdi-comment-processing-outline"></i><span class="hide-menu"> Apps Widgets  </span></a></li>
                                    <li class="sidebar-item"><a href="widgets-data.html" class="sidebar-link"><i class="mdi mdi-calendar"></i><span class="hide-menu"> Data Widgets  </span></a></li>
                                    <li class="sidebar-item"><a href="widgets-charts.html" class="sidebar-link"><i class="mdi mdi-bulletin-board"></i><span class="hide-menu"> Charts Widgets</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-receipt"></i><span class="hide-menu">Form Layouts</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><i class="mdi mdi-priority-low"></i><span class="hide-menu"> Forms Input</span></a></li>
                                    <li class="sidebar-item"><a href="form-input-groups.html" class="sidebar-link"><i class="mdi mdi-rounded-corner"></i><span class="hide-menu"> Input Groups</span></a></li>
                                    <li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><i class="mdi mdi-select-all"></i><span class="hide-menu"> Input Grid</span></a></li>
                                    <li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><i class="mdi mdi-shape-plus"></i><span class="hide-menu"> Checkboxes &amp; Radios</span></a></li>
                                    <li class="sidebar-item"><a href="form-bootstrap-touchspin.html" class="sidebar-link"><i class="mdi mdi-switch"></i><span class="hide-menu"> Bootstrap Touchspin</span></a></li>
                                    <li class="sidebar-item"><a href="form-bootstrap-switch.html" class="sidebar-link"><i class="mdi mdi-toggle-switch-off"></i><span class="hide-menu"> Bootstrap Switch</span></a></li>
                                    <li class="sidebar-item"><a href="form-select2.html" class="sidebar-link"><i class="mdi mdi-relative-scale"></i><span class="hide-menu"> Select2</span></a></li>
                                    <li class="sidebar-item"><a href="form-dual-listbox.html" class="sidebar-link"><i class="mdi mdi-tab-unselected"></i><span class="hide-menu"> Dual Listbox</span></a></li>
                                    <li class="sidebar-item"><a href="form-basic.html" class="sidebar-link"><i class="mdi mdi-vector-difference-ba"></i><span class="hide-menu"> Basic Forms</span></a></li>
                                    <li class="sidebar-item"><a href="form-horizontal.html" class="sidebar-link"><i class="mdi mdi-file-document-box"></i><span class="hide-menu"> Form Horizontal</span></a></li>
                                    <li class="sidebar-item"><a href="form-actions.html" class="sidebar-link"><i class="mdi mdi-code-greater-than"></i><span class="hide-menu"> Form Actions</span></a></li>
                                    <li class="sidebar-item"><a href="form-row-separator.html" class="sidebar-link"><i class="mdi mdi-code-equal"></i><span class="hide-menu"> Row Separator</span></a></li>
                                    <li class="sidebar-item"><a href="form-bordered.html" class="sidebar-link"><i class="mdi mdi-flip-to-front"></i><span class="hide-menu"> Form Bordered</span></a></li>
                                    <li class="sidebar-item"><a href="form-striped-row.html" class="sidebar-link"><i class="mdi mdi-content-duplicate"></i><span class="hide-menu"> Striped Rows</span></a></li>
                                    <li class="sidebar-item"><a href="form-detail.html" class="sidebar-link"><i class="mdi mdi-cards-outline"></i><span class="hide-menu"> Form Detail</span></a></li>
                                    <li class="sidebar-item"><a href="form-paginator.html" class="sidebar-link"><i class="mdi mdi-export"></i><span class="hide-menu"> Paginator</span></a></li>
                                    <li class="sidebar-item"><a href="form-img-cropper.html" class="sidebar-link"><i class="mdi mdi-crop"></i><span class="hide-menu"> Image Cropper</span></a></li>
                                    <li class="sidebar-item"><a href="form-dropzone.html" class="sidebar-link"><i class="mdi mdi-crosshairs-gps"></i><span class="hide-menu"> Dropzone</span></a></li>
                                    <li class="sidebar-item"><a href="form-mask.html" class="sidebar-link"><i class="mdi mdi-box-shadow"></i><span class="hide-menu"> Form Mask</span></a></li>
                                    <li class="sidebar-item"><a href="form-typeahead.html" class="sidebar-link"><i class="mdi mdi-cards-variant"></i><span class="hide-menu"> Form Typehead</span></a></li>
                                    <li class="sidebar-item"><a href="form-bootstrap-validation.html" class="sidebar-link"><i class="mdi mdi-credit-card-scan"></i><span class="hide-menu"> Bootstrap Validation</span></a></li>
                                    <li class="sidebar-item"><a href="form-custom-validation.html" class="sidebar-link"><i class="mdi mdi-credit-card-plus"></i><span class="hide-menu"> Custom Validation</span></a></li>
                                    <li class="sidebar-item"><a href="form-picker-colorpicker.html" class="sidebar-link"><i class="mdi mdi-calendar-plus"></i><span class="hide-menu"> Form Colorpicker</span></a></li>
                                    <li class="sidebar-item"><a href="form-picker-datetimepicker.html" class="sidebar-link"><i class="mdi mdi-calendar-clock"></i><span class="hide-menu"> Form Datetimepicker</span></a></li>
                                    <li class="sidebar-item"><a href="form-picker-bootstrap-rangepicker.html" class="sidebar-link"><i class="mdi mdi-calendar-range"></i><span class="hide-menu"> Form Bootstrap Rangepicker</span></a></li>
                                    <li class="sidebar-item"><a href="form-picker-bootstrap-datepicker.html" class="sidebar-link"><i class="mdi mdi-calendar-check"></i><span class="hide-menu"> Form Bootstrap Datepicker</span></a></li>
                                    <li class="sidebar-item"><a href="form-picker-material-datepicker.html" class="sidebar-link"><i class="mdi mdi-calendar-text"></i><span class="hide-menu"> Form Material Datepicker</span></a></li>
                                    <li class="sidebar-item"><a href="form-editor-ckeditor.html" class="sidebar-link"><i class="mdi mdi-drawing"></i><span class="hide-menu">Ck Editor</span></a></li>
                                    <li class="sidebar-item"><a href="form-editor-quill.html" class="sidebar-link"><i class="mdi mdi-drupal"></i><span class="hide-menu">Quill Editor</span></a></li>
                                    <li class="sidebar-item"><a href="form-editor-summernote.html" class="sidebar-link"><i class="mdi mdi-brightness-6"></i><span class="hide-menu">Summernote Editor</span></a></li>
                                    <li class="sidebar-item"><a href="form-editor-tinymce.html" class="sidebar-link"><i class="mdi mdi-bowling"></i><span class="hide-menu">Tinymce Edtor</span></a></li>
                                    <li class="sidebar-item"> <a href="form-wizard.html" aria-expanded="false" class="sidebar-link" ><i class="mdi mdi-cube-send"></i><span class="hide-menu">Form Wizard</span></a></li>
                                    <li class="sidebar-item"> <a href="form-repeater.html" aria-expanded="false" class="sidebar-link" ><i class="mdi mdi-creation"></i><span class="hide-menu">Form Repeater</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-border-none"></i><span class="hide-menu">Bootstrap Tables</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><i class="mdi mdi-border-all"></i><span class="hide-menu">Basic Table </span></a></li>
                                    <li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><i class="mdi mdi-border-left"></i><span class="hide-menu">Dark Basic Table </span></a></li>
                                    <li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><i class="mdi mdi-border-outside"></i><span class="hide-menu">Sizing Table </span></a></li>
                                    <li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><i class="mdi mdi-border-bottom"></i><span class="hide-menu">Coloured Table Layout</span></a></li>
                                    <li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><i class="mdi mdi-border-vertical"></i><span class="hide-menu"> Basic Initialisation</span></a></li>
                                    <li class="sidebar-item"><a href="table-datatable-api.html" class="sidebar-link"><i class="mdi mdi-blur-linear"></i><span class="hide-menu"> API</span></a></li>
                                    <li class="sidebar-item"><a href="table-datatable-advanced.html" class="sidebar-link"><i class="mdi mdi-border-style"></i><span class="hide-menu"> Advanced Initialisation</span></a></li>
                                    <li class="sidebar-item"><a href="table-jsgrid.html" class="sidebar-link"><i class="mdi mdi-border-top"></i><span class="hide-menu">Table Jsgrid</span></a></li>
                                    <li class="sidebar-item"><a href="table-responsive.html" class="sidebar-link"><i class="mdi mdi-border-style"></i><span class="hide-menu">Table Responsive</span></a></li>
                                    <li class="sidebar-item"><a href="table-footable.html" class="sidebar-link"><i class="mdi mdi-tab-unselected"></i><span class="hide-menu">Table Footable</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-chemical-weapon"></i><span class="hide-menu">Charts</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="chart-c3-axis.html" class="sidebar-link"><i class="mdi mdi-arrange-bring-to-front"></i> <span class="hide-menu">Axis Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-c3-bar.html" class="sidebar-link"><i class="mdi mdi-arrange-send-to-back"></i> <span class="hide-menu">Bar Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-c3-data.html" class="sidebar-link"><i class="mdi mdi-backup-restore"></i> <span class="hide-menu">Data Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-c3-line.html" class="sidebar-link"><i class="mdi mdi-backburger"></i> <span class="hide-menu">Line Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><i class="mdi mdi-image-filter-tilt-shift"></i><span class="hide-menu"> Morris Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><i class="mdi mdi-svg"></i><span class="hide-menu">Chartjs</span></a></li>
                                    <li class="sidebar-item"><a href="chart-sparkline.html" class="sidebar-link"><i class="mdi mdi-chart-histogram"></i><span class="hide-menu">Sparkline Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-chartist.html" class="sidebar-link"><i class="mdi mdi-blur"></i><span class="hide-menu">Chartis Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-echart-basic.html" class="sidebar-link"><i class="mdi mdi-chart-line"></i> <span class="hide-menu">Basic Charts</span></a></li>
                                    <li class="sidebar-item"><a href="chart-echart-bar.html" class="sidebar-link"><i class="mdi mdi-chart-scatterplot-hexbin"></i> <span class="hide-menu">Bar Chart</span></a></li>
                                    <li class="sidebar-item"><a href="chart-echart-pie-doughnut.html" class="sidebar-link"><i class="mdi mdi-chart-pie"></i> <span class="hide-menu">Pie &amp; Doughnut Chart</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-cart-outline"></i><span class="hide-menu">Ecommerce Pages</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="eco-products.html" class="sidebar-link"><i class="mdi mdi-cards-variant"></i> <span class="hide-menu">Products</span></a></li>
                                    <li class="sidebar-item"><a href="eco-products-cart.html" class="sidebar-link"><i class="mdi mdi-cart"></i> <span class="hide-menu">Products Cart</span></a></li>
                                    <li class="sidebar-item"><a href="eco-products-edit.html" class="sidebar-link"><i class="mdi mdi-cart-plus"></i> <span class="hide-menu">Products Edit</span></a></li>
                                    <li class="sidebar-item"><a href="eco-products-detail.html" class="sidebar-link"><i class="mdi mdi-camera-burst"></i> <span class="hide-menu">Product Details</span></a></li>
                                    <li class="sidebar-item"><a href="eco-products-orders.html" class="sidebar-link"><i class="mdi mdi-chart-pie"></i> <span class="hide-menu">Product Orders</span></a></li>
                                    <li class="sidebar-item"><a href="eco-products-checkout.html" class="sidebar-link"><i class="mdi mdi-clipboard-check"></i> <span class="hide-menu">Products Checkout</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-file"></i><span class="hide-menu">Sample Pages </span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="starter-kit.html" class="sidebar-link"><i class="mdi mdi-crop-free"></i> <span class="hide-menu">Starter Kit</span></a></li>
                                    <li class="sidebar-item"><a href="pages-animation.html" class="sidebar-link"><i class="mdi mdi-debug-step-over"></i> <span class="hide-menu">Animation</span></a></li>
                                    <li class="sidebar-item"><a href="pages-search-result.html" class="sidebar-link"><i class="mdi mdi-search-web"></i> <span class="hide-menu">Search Result</span></a></li>
                                    <li class="sidebar-item"><a href="pages-gallery.html" class="sidebar-link"><i class="mdi mdi-camera-iris"></i> <span class="hide-menu">Gallery</span></a></li>
                                    <li class="sidebar-item"><a href="pages-treeview.html" class="sidebar-link"><i class="mdi mdi-file-tree"></i> <span class="hide-menu">Treeview</span></a></li>
                                    <li class="sidebar-item"><a href="pages-block-ui.html" class="sidebar-link"><i class="mdi mdi-codepen"></i> <span class="hide-menu">Block UI</span></a></li>
                                    <li class="sidebar-item"><a href="pages-session-timeout.html" class="sidebar-link"><i class="mdi mdi-timer-off"></i> <span class="hide-menu">Session Timeout</span></a></li>
                                    <li class="sidebar-item"><a href="pages-session-idle-timeout.html" class="sidebar-link"><i class="mdi mdi-timer-sand-empty"></i> <span class="hide-menu">Session Idle Timeout</span></a></li>
                                    <li class="sidebar-item"><a href="pages-utility-classes.html" class="sidebar-link"><i class="mdi mdi-tune"></i> <span class="hide-menu">Helper Classes</span></a></li>
                                    <li class="sidebar-item"><a href="pages-maintenance.html" class="sidebar-link"><i class="mdi mdi-camera-iris"></i> <span class="hide-menu">Maintenance Page</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-account-multiple"></i><span class="hide-menu">Users</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="authentication-login1.html" class="sidebar-link"><i class="mdi mdi-account-key"></i><span class="hide-menu"> Login </span></a></li>
                                    <li class="sidebar-item"><a href="authentication-register1.html" class="sidebar-link"><i class="mdi mdi-account-plus"></i><span class="hide-menu"> Register</span></a></li>
                                    <li class="sidebar-item"><a href="authentication-lockscreen.html" class="sidebar-link"><i class="mdi mdi-account-off"></i><span class="hide-menu"> Lockscreen</span></a></li>
                                    <li class="sidebar-item"><a href="authentication-recover-password.html" class="sidebar-link"><i class="mdi mdi-account-convert"></i><span class="hide-menu"> Recover password</span></a></li>
                                    <li class="sidebar-item"><a href="ui-user-card.html" class="sidebar-link"><i class="mdi mdi-account-box"></i> <span class="hide-menu"> User Card </span></a></li>
                                    <li class="sidebar-item"><a href="pages-profile.html" class="sidebar-link"><i class="mdi mdi-account-network"></i><span class="hide-menu"> User Profile</span></a></li>
                                    <li class="sidebar-item"><a href="ui-user-contacts.html" class="sidebar-link"><i class="mdi mdi-account-star-variant"></i><span class="hide-menu"> User Contact</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-ungroup"></i><span class="hide-menu">Invoice</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="pages-invoice.html" class="sidebar-link"><i class="mdi mdi-vector-triangle"></i><span class="hide-menu"> Invoice Layout </span></a></li>
                                    <li class="sidebar-item"><a href="pages-invoice-list.html" class="sidebar-link"><i class="mdi mdi-vector-rectangle"></i><span class="hide-menu"> Invoice List</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-map"></i><span class="hide-menu">Maps</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="map-google.html" class="sidebar-link"><i class="mdi mdi-google-maps"></i><span class="hide-menu"> Google Map </span></a></li>
                                    <li class="sidebar-item"><a href="map-vector.html" class="sidebar-link"><i class="mdi mdi-map-marker-radius"></i><span class="hide-menu"> Vector Map</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-face"></i><span class="hide-menu">Icons</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="icon-material.html" class="sidebar-link"><i class="mdi mdi-emoticon"></i> <span class="hide-menu"> Material Icons </span></a></li>
                                    <li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><i class="mdi mdi-emoticon-cool"></i><span class="hide-menu"> Fontawesome Icons</span></a></li>
                                    <li class="sidebar-item"><a href="icon-themify.html" class="sidebar-link"><i class="mdi mdi-chart-bubble"></i><span class="hide-menu"> Themify Icons</span></a></li>
                                    <li class="sidebar-item"><a href="icon-weather.html" class="sidebar-link"><i class="mdi mdi-weather-cloudy"></i><span class="hide-menu"> Weather Icons</span></a></li>
                                    <li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><i class="mdi mdi mdi-image-broken-variant"></i> <span class="hide-menu"> Simple Line icons</span></a></li>
                                    <li class="sidebar-item"><a href="icon-flag.html" class="sidebar-link"><i class="mdi mdi-flag-triangle"></i><span class="hide-menu"> Flag Icons</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-apple-safari"></i><span class="hide-menu">Timeline</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="timeline-center.html" class="sidebar-link"><i class="mdi mdi-clock-fast"></i> <span class="hide-menu"> Center Timeline </span></a></li>
                                    <li class="sidebar-item"><a href="timeline-horizontal.html" class="sidebar-link"><i class="mdi mdi-clock-end"></i><span class="hide-menu"> Horizontal Timeline</span></a></li>
                                    <li class="sidebar-item"><a href="timeline-left.html" class="sidebar-link"><i class="mdi mdi-clock-in"></i><span class="hide-menu"> Left Timeline</span></a></li>
                                    <li class="sidebar-item"><a href="timeline-right.html" class="sidebar-link"><i class="mdi mdi-clock-start"></i><span class="hide-menu"> Right Timeline</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-alert-box"></i><span class="hide-menu">Error Pages</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="error-400.html" class="sidebar-link"><i class="mdi mdi-alert-outline"></i> <span class="hide-menu"> Error 400 </span></a></li>
                                    <li class="sidebar-item"><a href="error-403.html" class="sidebar-link"><i class="mdi mdi-alert-outline"></i><span class="hide-menu"> Error 403</span></a></li>
                                    <li class="sidebar-item"><a href="error-404.html" class="sidebar-link"><i class="mdi mdi-alert-outline"></i><span class="hide-menu"> Error 404</span></a></li>
                                    <li class="sidebar-item"><a href="error-500.html" class="sidebar-link"><i class="mdi mdi-alert-outline"></i><span class="hide-menu"> Error 500</span></a></li>
                                    <li class="sidebar-item"><a href="error-503.html" class="sidebar-link"><i class="mdi mdi-alert-outline"></i><span class="hide-menu"> Error 503</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-notification-clear-all"></i><span class="hide-menu">Multi level dd</span></a>
                                <ul aria-expanded="false" class="collapse first-level">
                                    <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.1</span></a></li>
                                    <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.2</span></a></li>
                                    <li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-playlist-plus"></i> <span class="hide-menu">Menu 1.3</span></a>
                                        <ul aria-expanded="false" class="collapse second-level">
                                            <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.1</span></a></li>
                                            <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.2</span></a></li>
                                            <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.3</span></a></li>
                                            <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-octagram"></i><span class="hide-menu"> item 1.3.4</span></a></li>
                                        </ul>
                                    </li>
                                    <li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><i class="mdi mdi-playlist-check"></i><span class="hide-menu"> item 1.4</span></a></li>
                                </ul>
                            </li>
                            <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="authentication-login1.html" aria-expanded="false"><i class="mdi mdi-directions"></i><span class="hide-menu">Log Out</span></a></li>
                        </ul>
                    </nav>
                    <!-- End Sidebar navigation -->
                </div>
                <!-- End Sidebar scroll-->
            </aside>
            <!-- ============================================================== -->
            <!-- End Left Sidebar - style you can find in sidebar.scss  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- Page wrapper  -->
            <!-- ============================================================== -->
            <div class="page-wrapper">
                <!-- ============================================================== -->
                <!-- Container fluid  -->
                <!-- ============================================================== -->
                <div class="container-fluid">
                    <!-- ============================================================== -->
                    <!-- Bread crumb and right sidebar toggle -->
                    <!-- ============================================================== -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="page-breadcrumb">
                                <h4 class="page-title">Dashboard</h4>
                                <div class="d-flex align-items-center">
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                            <li class="breadcrumb-item active">Library</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- End Bread crumb and right sidebar toggle -->
                    <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- Start Page Content -->
                    <!-- ============================================================== -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6 m-b-30">
                                            <h4 class="card-title">Badges</h4>
                                            <h6 class="card-subtitle">Use class <code>.badge</code> and for colors <code>badge-success</code> for get desire badge.</h6>
                                            <h1>Example heading <span class="badge badge-secondary">New</span></h1>
                                            <h2>Example heading <span class="badge badge-success">New</span></h2>
                                            <h3>Example heading <span class="badge badge-info">New</span></h3>
                                            <h4>Example heading <span class="badge badge-primary">New</span></h4>
                                            <h5>Example heading <span class="badge badge-danger">New</span></h5>
                                            <h6>Example heading <span class="badge badge-warning">New</span></h6>
                                        </div>
                                        <div class="col-lg-3 m-b-30">
                                            <h4 class="card-title">Contextual Badge variations</h4>
                                            <h6 class="card-subtitle">Use class <code>.badge</code> and for colors <code>badge-success</code> for get desire badge.</h6>
                                            <span class="badge badge-secondary">Default</span>
                                            <br/>
                                            <span class="badge badge-primary">Primary</span>
                                            <br/>
                                            <span class="badge badge-success">Success</span>
                                            <br/>
                                            <span class="badge badge-info">Info</span>
                                            <br/>
                                            <span class="badge badge-warning">Warning</span>
                                            <br/>
                                            <span class="badge badge-danger">Danger</span>
                                        </div>
                                        <div class="col-lg-3 m-b-30">
                                            <h4 class="card-title">Pill badges</h4>
                                            <h6 class="card-subtitle">Use class <code>.badge-pill</code> and for colors <code>badge-success</code> for get desire badge.</h6>
                                            <span class="badge badge-pill badge-secondary">Default</span>
                                            <br/>
                                            <span class="badge badge-pill badge-primary">Primary</span>
                                            <br/>
                                            <span class="badge badge-pill badge-success">Success</span>
                                            <br/>
                                            <span class="badge badge-pill badge-info">Info</span>
                                            <br/>
                                            <span class="badge badge-pill badge-warning">Warning</span>
                                            <br/>
                                            <span class="badge badge-pill badge-danger">Danger</span>
                                        </div>
                                        <div class="col-lg-6">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;h1&gt;Example heading &lt;span class=&quot;badge badge-default&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
                                                &lt;h2&gt;Example heading &lt;span class=&quot;badge badge-success&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
                                                &lt;h3&gt;Example heading &lt;span class=&quot;badge badge-info&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
                                                &lt;h4&gt;Example heading &lt;span class=&quot;badge badge-primary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
                                                &lt;h5&gt;Example heading &lt;span class=&quot;badge badge-danger&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-3">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;span class=&quot;badge badge-default&quot;&gt;Default&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-primary&quot;&gt;Primary&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-3">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;span class=&quot;badge badge-pill badge-default&quot;&gt;Default&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-pill badge-primary&quot;&gt;Primary&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-pill badge-success&quot;&gt;Success&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-pill badge-info&quot;&gt;Info&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-pill badge-warning&quot;&gt;Warning&lt;/span&gt;
                                                &lt;span class=&quot;badge badge-pill badge-danger&quot;&gt;Danger&lt;/span&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-md-6">
                                            <h4 class="card-title m-t-15">Badges</h4>
                                            <button type="button" class="btn btn-primary">
                                                Notifications <span class="badge badge-light">4</span>
                                            </button>
                                            <button type="button" class="btn btn-primary">
                                                Profile <span class="badge badge-light">9</span>
                                                <span class="sr-only">unread messages</span>
                                            </button>
                                        </div>
                                        <div class="col-md-6">
                                            <h4 class="card-title m-t-15">Contextual variations</h4>
                                            <span class="badge badge-primary">Primary</span>
                                            <span class="badge badge-secondary">Secondary</span>
                                            <span class="badge badge-success">Success</span>
                                            <span class="badge badge-danger">Danger</span>
                                            <span class="badge badge-warning">Warning</span>
                                            <span class="badge badge-info">Info</span>
                                            <span class="badge badge-light">Light</span>
                                            <span class="badge badge-dark">Dark</span>
                                            <h4 class="card-title m-t-15">Pill badges</h4>
                                            <span class="badge badge-pill badge-primary">Primary</span>
                                            <span class="badge badge-pill badge-secondary">Secondary</span>
                                            <span class="badge badge-pill badge-success">Success</span>
                                            <span class="badge badge-pill badge-danger">Danger</span>
                                            <span class="badge badge-pill badge-warning">Warning</span>
                                            <span class="badge badge-pill badge-info">Info</span>
                                            <span class="badge badge-pill badge-light">Light</span>
                                            <span class="badge badge-pill badge-dark">Dark</span>
                                        </div>
                                        <div class="col-12">
                                            <br>
                                            <br>
                                            <hr>
                                            <br>
                                            <br>
                                        </div>
                                        <div class="col-lg-5 m-b-30">
                                            <h4 class="card-title">Collapse (Toggle)</h4>
                                            <h6 class="card-subtitle">click below button, for Use a link with the <code>href</code> attribute, with class <code>.collapse</code> get desire toggle.</h6>
                                            <p>
                                                <a class="btn btn-info" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                                    Link with href
                                                </a>
                                                <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                                    Button with data-target
                                                </button>
                                            </p>
                                            <div class="collapse" id="collapseExample">
                                                <div class="card card-body">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 offset-lg-1">
                                            <h4 class="card-title">Accordion example</h4>
                                            <h6 class="card-subtitle">Extend the default collapse behavior to create an accordion.</h6>
                                            <div id="accordian-3">
                                                <div class="card">
                                                    <a class="card-header" id="heading11">
                                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                                            <h5 class="m-b-0">Accordion Example 1</h5>
                                                        </button>
                                                    </a>
                                                    <div id="collapse1" class="collapse show" aria-labelledby="heading11" data-parent="#accordian-3">
                                                        <div class="card-body">
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <a class="card-header" id="heading22">
                                                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                                            <h5 class="m-b-0">Accordion Example 2</h5>
                                                        </button>
                                                    </a>
                                                    <div id="collapse2" class="collapse" aria-labelledby="heading22" data-parent="#accordian-3">
                                                        <div class="card-body">
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card">
                                                    <a class="card-header" id="heading33">
                                                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                                            <h5 class="m-b-0">Accordion Example 3</h5>
                                                        </button>
                                                    </a>
                                                    <div id="collapse3" class="collapse" aria-labelledby="heading33" data-parent="#accordian-3">
                                                        <div class="card-body">
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <pre class="language-html scrollable">
                                            <code>
                                                 &lt;p&gt;
                                                    &lt;a class=&quot;btn btn-info&quot; data-toggle=&quot;collapse&quot; href=&quot;#collapseExample&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseExample&quot;&gt;
                                                Link with href
                                                &lt;/a&gt;
                                                    &lt;button class=&quot;btn btn-success&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseExample&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseExample&quot;&gt;
                                                        Button with data-target
                                                    &lt;/button&gt;
                                                &lt;/p&gt;
                                                &lt;div class=&quot;collapse&quot; id=&quot;collapseExample&quot;&gt;
                                                    &lt;div class=&quot;card card-body&quot;&gt;
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-6 offset-lg-1">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;div id=&quot;accordion2&quot; class=&quot;accordion&quot; role=&quot;tablist&quot; aria-multiselectable=&quot;true&quot;&gt;
                                                    &lt;div class=&quot;card&quot;&gt;
                                                        &lt;div class=&quot;card-header&quot; role=&quot;tab&quot; id=&quot;headingOne&quot;&gt;
                                                            &lt;h5 class=&quot;mb-0&quot;&gt;
                                                                &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapse1&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
                                                                  Collapsible Group Item #1
                                                                &lt;/a&gt;
                                                              &lt;/h5&gt;
                                                        &lt;/div&gt;
                                                        &lt;div id=&quot;collapse1&quot; class=&quot;collapse show&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;headingOne&quot;&gt;
                                                            &lt;div class=&quot;card-body&quot;&gt;
                                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                                            &lt;/div&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class=&quot;card&quot;&gt;
                                                        &lt;div class=&quot;card-header&quot; role=&quot;tab&quot; id=&quot;headingTwo&quot;&gt;
                                                            &lt;h5 class=&quot;mb-0&quot;&gt;
                                                                &lt;a class=&quot;collapsed&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapse2&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseTwo&quot;&gt;
                                                                  Collapsible Group Item #2
                                                                &lt;/a&gt;
                                                              &lt;/h5&gt;
                                                        &lt;/div&gt;
                                                        &lt;div id=&quot;collapse2&quot; class=&quot;collapse&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;headingTwo&quot;&gt;
                                                            &lt;div class=&quot;card-body&quot;&gt;
                                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                                            &lt;/div&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class=&quot;card&quot;&gt;
                                                        &lt;div class=&quot;card-header&quot; role=&quot;tab&quot; id=&quot;headingThree&quot;&gt;
                                                            &lt;h5 class=&quot;mb-0&quot;&gt;
                                                                &lt;a class=&quot;collapsed&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapse3&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseThree&quot;&gt;
                                                                  Collapsible Group Item #3
                                                                &lt;/a&gt;
                                                              &lt;/h5&gt;
                                                        &lt;/div&gt;
                                                        &lt;div id=&quot;collapse3&quot; class=&quot;collapse&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;headingThree&quot;&gt;
                                                            &lt;div class=&quot;card-body&quot;&gt;
                                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                                            &lt;/div&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-12">
                                            <br>
                                            <br>
                                            <hr>
                                            <br>
                                            <br>
                                        </div>
                                        <div class="col-lg-6 m-b-30">
                                            <h4 class="card-title">Label Example</h4>
                                            <h6 class="card-subtitle">Use class <code>.label </code> for get desire text.</h6>
                                            <h1>Example heading <span class="label label-inverse">New</span></h1>
                                            <h2>Example heading <span class="label label-success">New</span></h2>
                                            <h3>Example heading <span class="label label-info">New</span></h3>
                                            <h4>Example heading <span class="label label-primary">New</span></h4>
                                            <h5>Example heading <span class="label label-danger">New</span></h5>
                                            <h6>Example heading <span class="label label-warning">New</span></h6>
                                        </div>
                                        <div class="col-lg-3 m-b-30">
                                            <h4 class="card-title">Contextual Label variations</h4>
                                            <h6 class="card-subtitle">Use class <code>.label</code> and for colors <code>label-success</code> for get desire label.</h6>
                                            <span class="label label-inverse">Default</span>
                                            <br>
                                            <span class="label label-primary">Primary</span>
                                            <br>
                                            <span class="label label-success">Success</span>
                                            <br>
                                            <span class="label label-info">Info</span>
                                            <br>
                                            <span class="label label-warning">Warning</span>
                                            <br>
                                            <span class="label label-danger">Danger</span>
                                        </div>
                                        <div class="col-lg-3 m-b-30">
                                            <h4 class="card-title">Label rounded</h4>
                                            <h6 class="card-subtitle">Use class <code>.label .label-rounded</code> and for colors <code>label-success</code> for get desire label.</h6>
                                            <span class="label label-rounded label-inverse">Default</span>
                                            <br>
                                            <span class="label label-rounded label-primary">Primary</span>
                                            <br>
                                            <span class="label label-rounded label-success">Success</span>
                                            <br>
                                            <span class="label label-rounded label-info">Info</span>
                                            <br>
                                            <span class="label label-rounded label-warning">Warning</span>
                                            <br>
                                            <span class="label label-rounded label-danger">Danger</span>
                                        </div>
                                        <div class="col-lg-6">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;h1&gt;Example heading &lt;span class=&quot;label label-inverse&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
                                                &lt;h2&gt;Example heading &lt;span class=&quot;label label-success&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
                                                &lt;h3&gt;Example heading &lt;span class=&quot;label label-info&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
                                                &lt;h4&gt;Example heading &lt;span class=&quot;label label-primary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
                                                &lt;h5&gt;Example heading &lt;span class=&quot;label label-danger&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
                                                &lt;h6&gt;Example heading &lt;span class=&quot;label label-warning&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-3">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;span class=&quot;label label-inverse&quot;&gt;Default&lt;/span&gt; &lt;span class=&quot;label label-light-inverse&quot;&gt;Default&lt;/span&gt;
                                                &lt;span class=&quot;label label-primary&quot;&gt;Primary&lt;/span&gt; &lt;span class=&quot;label label-light-primary&quot;&gt;Primary&lt;/span&gt;
                                                &lt;span class=&quot;label label-success&quot;&gt;Success&lt;/span&gt; &lt;span class=&quot;label label-light-success&quot;&gt;Success&lt;/span&gt;
                                                &lt;span class=&quot;label label-info&quot;&gt;Info&lt;/span&gt; &lt;span class=&quot;label label-light-info&quot;&gt;Info&lt;/span&gt;
                                                &lt;span class=&quot;label label-warning&quot;&gt;Warning&lt;/span&gt; &lt;span class=&quot;label label-light-warning&quot;&gt;Warning&lt;/span&gt;
                                                &lt;span class=&quot;label label-danger&quot;&gt;Danger&lt;/span&gt; &lt;span class=&quot;label label-light-danger&quot;&gt;Danger&lt;/span&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-3">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;span class=&quot;label label-rounded label-inverse&quot;&gt;Default&lt;/span&gt;
                                                &lt;span class=&quot;label label-rounded label-primary&quot;&gt;Primary&lt;/span&gt;
                                                &lt;span class=&quot;label label-rounded label-success&quot;&gt;Success&lt;/span&gt;
                                                &lt;span class=&quot;label label-rounded label-info&quot;&gt;Info&lt;/span&gt;
                                                &lt;span class=&quot;label label-rounded label-warning&quot;&gt;Warning&lt;/span&gt;
                                                &lt;span class=&quot;label label-rounded label-danger&quot;&gt;Danger&lt;/span&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-12">
                                            <br>
                                            <br>
                                            <hr>
                                            <br>
                                            <br>
                                        </div>
                                        <div class="col-lg-4 m-b-30">
                                            <h4 class="card-title">Simple pagination</h4>
                                            <h6 class="card-subtitle">To make pagination give class <code>pagination</code> to ul</h6>
                                            <nav aria-label="Page navigation example">
                                                <ul class="pagination">
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-lg-4 m-b-30">
                                            <h4 class="card-title">Working with icons</h4>
                                            <h6 class="card-subtitle">To make pagination give class <code>pagination</code> to ul</h6>
                                            <nav aria-label="Page navigation example">
                                                <ul class="pagination">
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0)" aria-label="Previous">
                                                            <span aria-hidden="true">&laquo;</span>
                                                            <span class="sr-only">Previous</span>
                                                        </a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0)" aria-label="Next">
                                                            <span aria-hidden="true">&raquo;</span>
                                                            <span class="sr-only">Next</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-lg-4 m-b-30">
                                            <h4 class="card-title">Disabled and active states</h4>
                                            <h6 class="card-subtitle">To make pagination active or disable give class <code>.disabled & .active</code> to ul</h6>
                                            <nav aria-label="...">
                                                <ul class="pagination">
                                                    <li class="page-item disabled">
                                                        <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                                                    <li class="page-item active">
                                                        <a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0)">Next</a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-lg-4">
                                            <pre class="language-html scrollable">
                                            <code>
                                                 &lt;nav aria-label=&quot;Page navigation example&quot;&gt;
                                                    &lt;ul class=&quot;pagination&quot;&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;Previous&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;Next&lt;/a&gt;&lt;/li&gt;
                                                    &lt;/ul&gt;
                                                &lt;/nav&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-4">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;nav aria-label=&quot;Page navigation example&quot;&gt;
                                                    &lt;ul class=&quot;pagination&quot;&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot; aria-label=&quot;Previous&quot;&gt;
                                                                &lt;span aria-hidden=&quot;true&quot;&gt;&laquo;&lt;/span&gt;
                                                                &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
                                                            &lt;/a&gt;
                                                        &lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot; aria-label=&quot;Next&quot;&gt;
                                                                &lt;span aria-hidden=&quot;true&quot;&gt;&raquo;&lt;/span&gt;
                                                                &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
                                                            &lt;/a&gt;
                                                        &lt;/li&gt;
                                                    &lt;/ul&gt;
                                                &lt;/nav&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-4">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;nav aria-label=&quot;...&quot;&gt;
                                                    &lt;ul class=&quot;pagination&quot;&gt;
                                                        &lt;li class=&quot;page-item disabled&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot; tabindex=&quot;-1&quot;&gt;Previous&lt;/a&gt;
                                                        &lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item active&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;2 &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
                                                        &lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;Next&lt;/a&gt;
                                                        &lt;/li&gt;
                                                    &lt;/ul&gt;
                                                &lt;/nav&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-12">
                                            <br>
                                            <br>
                                            <hr>
                                            <br>
                                            <br>
                                        </div>
                                        <div class="col-12">
                                            <h4 class="card-title">Sizing</h4>
                                            <h6 class="card-subtitle">Fancy larger or smaller pagination? Add<code>.pagination-sm </code> for additional sizes.</h6>
                                            <nav aria-label="...">
                                                <ul class="pagination pagination-sm">
                                                    <li class="page-item disabled">
                                                        <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0)">Next</a>
                                                    </li>
                                                </ul>
                                            </nav>
                                            <div class="m-t-15">
                                                <pre class="language-html scrollable">
                                            <code>
                                                &lt;nav aria-label=&quot;...&quot;&gt;
                                                    &lt;ul class=&quot;pagination pagination-lg&quot;&gt;
                                                        &lt;li class=&quot;page-item disabled&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot; tabindex=&quot;-1&quot;&gt;Previous&lt;/a&gt;
                                                        &lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;Next&lt;/a&gt;
                                                        &lt;/li&gt;
                                                    &lt;/ul&gt;
                                                &lt;/nav&gt;
                                            </code>
                                                </pre>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <h4 class="card-title">Alignment</h4>
                                            <h6 class="card-subtitle">Change the alignment of pagination components with felxbox <code>justify-content-center, justify-content-end, </code></h6>
                                            <nav aria-label="Page navigation example">
                                                <ul class="pagination justify-content-center">
                                                    <li class="page-item disabled">
                                                        <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0)">Next</a>
                                                    </li>
                                                </ul>
                                            </nav>
                                            <div class="m-t-15">
                                                <pre class="language-html scrollable">
                                            <code>
                                                &lt;nav aria-label=&quot;Page navigation example&quot;&gt;
                                                    &lt;ul class=&quot;pagination justify-content-center&quot;&gt;
                                                        &lt;li class=&quot;page-item disabled&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot; tabindex=&quot;-1&quot;&gt;Previous&lt;/a&gt;
                                                        &lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;Next&lt;/a&gt;
                                                        &lt;/li&gt;
                                                    &lt;/ul&gt;
                                                &lt;/nav&gt;
                                            </code>
                                                </pre>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <h4 class="card-title">Sizing</h4>
                                            <h6 class="card-subtitle">Fancy larger or smaller pagination? Add<code>.pagination-lg </code> for additional sizes.</h6>
                                            <nav aria-label="...">
                                                <ul class="pagination pagination-lg">
                                                    <li class="page-item disabled">
                                                        <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="javascript:void(0)">Next</a>
                                                    </li>
                                                </ul>
                                            </nav>
                                            <div class="m-t-15">
                                                <pre class="language-html scrollable">
                                            <code>
                                                &lt;nav aria-label=&quot;...&quot;&gt;
                                                    &lt;ul class=&quot;pagination pagination-sm&quot;&gt;
                                                        &lt;li class=&quot;page-item disabled&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot; tabindex=&quot;-1&quot;&gt;Previous&lt;/a&gt;
                                                        &lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
                                                        &lt;li class=&quot;page-item&quot;&gt;
                                                            &lt;a class=&quot;page-link&quot; href=&quot;javascript:void(0)&quot;&gt;Next&lt;/a&gt;
                                                        &lt;/li&gt;
                                                    &lt;/ul&gt;
                                                &lt;/nav&gt;
                                            </code>
                                                </pre>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <br>
                                            <br>
                                            <hr>
                                            <br>
                                            <br>
                                        </div>
                                        <div class="col-lg-4 m-b-30">
                                            <h4 class="card-title">Image with round corner</h4>
                                            <h6 class="card-subtitle"><code>.img-rounded</code></h6>
                                            <img src="assets/images/big/img1.jpg" alt="image" class="img-responsive img-rounded" width="200">
                                            <p class="m-t-15 m-b-0">
                                        </div>
                                        <div class="col-lg-4 text-center m-b-30">
                                            <h4 class="card-title">Image with circle</h4>
                                            <h6 class="card-subtitle"><code>.img-circle</code> Make sure the image is square not ractangle</h6>
                                            <img src="assets/images/users/5.jpg" alt="image" class="rounded-circle" width="290">
                                            <p class="m-t-15 m-b-0">
                                        </div>
                                        <div class="col-lg-4">
                                            <h4 class="card-title">Image with Thumbnail</h4>
                                            <h6 class="card-subtitle"><code>img-thumbnail</code></h6>
                                            <img src="assets/images/users/5.jpg" alt="image" class="img-thumbnail" width="290">
                                            <p class="m-t-15 m-b-0">
                                        </div>
                                        <div class="col-lg-4">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;img src=&quot;assets/images/big/img1.jpg&quot; alt=&quot;image&quot; class=&quot;img-responsive img-rounded&quot; width=&quot;200&quot;&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-4">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;img src=&quot;assets/images/users/5.jpg&quot; alt=&quot;image&quot; class=&quot;img-circle&quot; width=&quot;290&quot;&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-4">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;img src=&quot;assets/images/users/5.jpg&quot; alt=&quot;image&quot; class=&quot;img-thumbnail&quot; width=&quot;290&quot;&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-12">
                                            <br>
                                            <br>
                                            <hr>
                                            <br>
                                            <br>
                                        </div>
                                        <div class="col-lg-6">
                                            <h4 class="card-title">jumbotron</h4>
                                            <h6 class="card-subtitle">A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</h6>
                                            <div class="jumbotron">
                                                <h1 class="display-3">Hello, world!</h1>
                                                <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                                                <hr class="my-4">
                                                <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                                                <p class="lead">
                                                    <a class="btn btn-primary btn-lg" href="javascript:void(0)" role="button">Learn more</a>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <h4 class="card-title">Fluid jumbotron</h4>
                                            <h6 class="card-subtitle">To make the jumbotron full width, and without rounded corners, add the <code>jumbotron-fluid</code></h6>
                                            <div class="jumbotron jumbotron-fluid">
                                                <div class="container">
                                                    <h1 class="display-3">Fluid jumbotron</h1>
                                                    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;div class=&quot;jumbotron&quot;&gt;
                                                    &lt;h1 class=&quot;display-3&quot;&gt;Hello, world!&lt;/h1&gt;
                                                    &lt;p class=&quot;lead&quot;&gt;This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.&lt;/p&gt;
                                                    &lt;hr class=&quot;my-4&quot;&gt;
                                                    &lt;p&gt;It uses utility classes for typography and spacing to space content out within the larger container.&lt;/p&gt;
                                                    &lt;p class=&quot;lead&quot;&gt;
                                                        &lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;javascript:void(0)&quot; role=&quot;button&quot;&gt;Learn more&lt;/a&gt;
                                                    &lt;/p&gt;
                                                &lt;/div&gt;
                                            </code>
                                            </pre>
                                        </div>
                                        <div class="col-lg-6">
                                            <pre class="language-html scrollable">
                                            <code>
                                                &lt;div class=&quot;jumbotron jumbotron-fluid&quot;&gt;
                                                    &lt;div class=&quot;container&quot;&gt;
                                                        &lt;h1 class=&quot;display-3&quot;&gt;Fluid jumbotron&lt;/h1&gt;
                                                        &lt;p class=&quot;lead&quot;&gt;This is a modified jumbotron that occupies the entire horizontal space of its parent.&lt;/p&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            </code>
                                            </pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- End PAge Content -->
                    <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- Right sidebar -->
                    <!-- ============================================================== -->
                    <!-- .right-sidebar -->
                    <!-- ============================================================== -->
                    <!-- End Right sidebar -->
                    <!-- ============================================================== -->
                </div>
                <!-- ============================================================== -->
                <!-- End Container fluid  -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- footer -->
                <!-- ============================================================== -->
                <footer class="footer text-left">
                    All Rights Reserved by Bebert admin. Designed and Developed by <a href="https://themeforest.net/user/expandtheme/portfolio">ExpandTheme</a>.
                </footer>
                <!-- ============================================================== -->
                <!-- End footer -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Page wrapper  -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Wrapper -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- customizer Panel -->
        <!-- ============================================================== -->
        <aside class="customizer">
            <a href="javascript:void(0)" class="service-panel-toggle"><i class="fa fa-spin fa-cog"></i></a>
            <div class="customizer-body">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                    <div class="p-15 border-bottom">
                        <!-- Sidebar -->
                        <h5 class="font-medium m-b-10 m-t-10">Layout Settings</h5>
                        <div class="custom-control custom-checkbox m-t-10">
                            <input type="checkbox" class="custom-control-input" name="theme-view" id="theme-view">
                            <label class="custom-control-label" for="theme-view">Dark Theme</label>
                        </div>
                        <div class="custom-control custom-checkbox m-t-10">
                            <input type="checkbox" class="custom-control-input sidebartoggler" name="collapssidebar" id="collapssidebar">
                            <label class="custom-control-label" for="collapssidebar">Collapse Sidebar</label>
                        </div>
                        <div class="custom-control custom-checkbox m-t-10">
                            <input type="checkbox" class="custom-control-input" name="sidebar-position" id="sidebar-position">
                            <label class="custom-control-label" for="sidebar-position">Fixed Sidebar</label>
                        </div>
                        <div class="custom-control custom-checkbox m-t-10">
                            <input type="checkbox" class="custom-control-input" name="header-position" id="header-position">
                            <label class="custom-control-label" for="header-position">Fixed Header</label>
                        </div>
                        <div class="custom-control custom-checkbox m-t-10">
                            <input type="checkbox" class="custom-control-input" name="boxed-layout" id="boxed-layout">
                            <label class="custom-control-label" for="boxed-layout">Boxed Layout</label>
                        </div>
                    </div>
                    <div class="p-15 border-bottom">
                        <!-- Logo BG -->
                        <h5 class="font-medium m-b-10 m-t-10">Logo Backgrounds</h5>
                        <ul class="theme-color">
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin1"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin2"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin3"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin4"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin5"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-logobg="skin6"></a></li>
                        </ul>
                        <!-- Logo BG -->
                    </div>
                    <div class="p-15 border-bottom">
                        <!-- Navbar BG -->
                        <h5 class="font-medium m-b-10 m-t-10">Navbar Backgrounds</h5>
                        <ul class="theme-color">
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin1"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin2"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin3"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin4"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin5"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-navbarbg="skin6"></a></li>
                        </ul>
                        <!-- Navbar BG -->
                    </div>
                    <div class="p-15 border-bottom">
                        <!-- Logo BG -->
                        <h5 class="font-medium m-b-10 m-t-10">Sidebar Backgrounds</h5>
                        <ul class="theme-color">
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin1"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin2"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin3"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin4"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin5"></a></li>
                            <li class="theme-item"><a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin6"></a></li>
                        </ul>
                        <!-- Logo BG -->
                    </div>
                </div>
            </div>
        </aside>
        <div class="chat-list-new">
            <a class="nav-link" href="#" id="chatDropdown" data-toggle="dropdown">
                <span class="d-none d-md-block"><i class="mdi mdi-comment-processing"></i> Chat(10)</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="chatDropdown">
                <div id="chat">
                    <div class="mailbox list-style-none">
                        <div class="message-center chat-scroll">
                            <a href="javascript:void(0)" class="message-item" id='chat_user_1' data-user-id='1'>
                                <span class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="rounded-circle"> <span class="profile-status online pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_2' data-user-id='2'>
                                <span class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="rounded-circle"> <span class="profile-status busy pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_3' data-user-id='3'>
                                <span class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="rounded-circle"> <span class="profile-status away pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_4' data-user-id='4'>
                                <span class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="rounded-circle"> <span class="profile-status offline pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Nirav Joshi</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_5' data-user-id='5'>
                                <span class="user-img"> <img src="assets/images/users/5.jpg" alt="user" class="rounded-circle"> <span class="profile-status offline pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Sunil Joshi</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_6' data-user-id='6'>
                                <span class="user-img"> <img src="assets/images/users/6.jpg" alt="user" class="rounded-circle"> <span class="profile-status offline pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Akshay Kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_7' data-user-id='7'>
                                <span class="user-img"> <img src="assets/images/users/7.jpg" alt="user" class="rounded-circle"> <span class="profile-status offline pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                            </a>
                            <!-- Message -->
                            <!-- Message -->
                            <a href="javascript:void(0)" class="message-item" id='chat_user_8' data-user-id='8'>
                                <span class="user-img"> <img src="assets/images/users/8.jpg" alt="user" class="rounded-circle"> <span class="profile-status offline pull-right"></span> </span>
                                <div class="mail-contnet">
                                    <h5 class="message-title">Varun Dhavan</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                            </a>
                            <!-- Message -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="chat-windows"></div>
        <!-- ============================================================== -->
        <!-- All Jquery -->
        <!-- ============================================================== -->
        <script src="assets/libs/jquery/dist/jquery.min.js"></script>
        <!-- Bootstrap tether Core JavaScript -->
        <script src="assets/libs/popper.js/dist/umd/popper.min.js"></script>
        <script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
        <!-- apps -->
        <script src="assets/js/app.js"></script>
        <script src="assets/js/app.init.js"></script>
        <script src="assets/js/app-style-switcher.js"></script>
        <!-- slimscrollbar scrollbar JavaScript -->
        <script src="assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
        <script src="assets/libs/sparkline/sparkline.js"></script>
        <!--Wave Effects -->
        <script src="assets/js/waves.js"></script>
        <!--Menu sidebar -->
        <script src="assets/js/sidebarmenu.js"></script>
        <!--Theme JavaScript -->
        <script src="assets/js/theme.js"></script>
        <!-- This Page JS -->
        <script src="assets/libs/prism/prism.js"></script>
    </body>

<!-- Mirrored from expandtheme.omorfaruks.com/admin/ui-bootstrap.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 11 Dec 2018 21:41:47 GMT -->
</html>